<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>官方爆料</title>
  <link rel="stylesheet" href="../../css/announce/announce.css">
  <link rel="stylesheet" href="../../node_modules/swiper/swiper-bundle.min.css">
</head>

<body>
  <!-- 顶部导航 -->
  <div class="nav-top">
    <a href="" class="logo"></a>
    <a href="" class="logo-text"></a>
    <div class="nav">
      <a href="file:///D:/%E7%AC%94%E8%AE%B0%E4%B9%8B%E5%89%8D%E7%AB%AF/1%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%92%8CCSS/code/day15/index.html"
        class="active">
        首页
        <span>HOME</span>
      </a>
      <a href="">
        皮肤
        <span>SKIN</span>
      </a>
      <a href="">
        英雄
        <span>HERO</span>
      </a>
      <a href="">
        玩法
        <span>MODE</span>
      </a>
      <a href="">
        系统
        <span>SYSTEM</span>
      </a>
      <a href="">
        美术优化
        <span>ARTS</span>
      </a>
    </div>
  </div>
  <!-- 轮播图 -->
  <div class="banner">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="swiper-contain">
            <img src="../../assets/announce/carousel/1.jpg" />
            <div class="banner-title">
              <p class="banner-tit1">
                <span class="color">新皮肤:</span>
                藏狐·褐绒-老夫子
              </p>
              <p class="banner-time">上线时间：20250418</p>
              <p class="banner-con">王者荣耀“高原三宝”三江源联动皮肤</p>
            </div>
          </div>
          
        </div>

        <div class="swiper-slide">
          <div class="swiper-contain">
            <img src="../../assets/announce/carousel/2.webp" />
            <div class="banner-title">
              <p class="banner-tit1">
                <span class="color">新皮肤:</span>
                雪豹·霜爪-百里守约                                     
              </p>
              <p class="banner-time">上线时间：20250411</p>
              <p class="banner-con">王者荣耀“高原三宝”三江源联动皮肤</p>
            </div>
          </div>

        </div>
        <div class="swiper-slide">
          <div class="swiper-contain">
            <img src="../../assets/announce/carousel/3.webp" />
            <div class="banner-title">
              <p class="banner-tit1">
                <span class="color">新皮肤:</span>
                灵野札记-张良                                     
              </p>
              <p class="banner-time">上线时间：20250410</p>
              <p class="banner-con">高原动物栖息地研究员必修技能：登山、攀岩，以及假装看不见脚下的万丈深渊。</p>
            </div>
          </div>

        </div>
        <div class="swiper-slide">
          <div class="swiper-contain">
            <img src="../../assets/announce/carousel/4.webp" />
            <div class="banner-title">
              <p class="banner-tit1">
                <span class="color">新皮肤:</span>
                云诺千山-公孙离                                     
              </p>
              <p class="banner-time">上线时间：20250403</p>
              <p class="banner-con">汇点滴心念，化云神，调风雨，济人间。2023年王者世冠KIC FMVP：成都AG.一诺FMVP皮肤。</p>
            </div>
          </div>

        </div>
        <div class="swiper-slide">
          <div class="swiper-contain">
            <img src="../../assets/announce/carousel/5.webp" />
            <div class="banner-title">
              <p class="banner-tit1">
                <span class="color">新皮肤:</span>
                秘证寻踪-小乔                                     
              </p>
              <p class="banner-time">上线时间：20250403</p>
              <p class="banner-con">侦探小乔登场，一起寻找线索吧~</p>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  <!-- 皮肤 -->
  <div class="new-skin">
    <!-- 皮肤标题 -->
    <div class="skin-title">
      <h1>皮肤</h1>
    </div>
    <!-- 最新皮肤 -->
    <div class="skin-main">
      <div class="main-mask">
        <div class="main-aside">
          <h1>
            <span>老夫子</span>
            <span>藏狐·褐绒</span>

          </h1>
          <p class="explain">
            王者荣耀“高原三宝”三江源联动皮肤
          </p>
          <p class="time">
            上线时间：2025-04-18
          </p>
          <div class="gif">
            <img src="../../assets/announce/skin/mainGif.webp" />
          </div>
          <div class="check">
            <span>查看皮肤 ></span>

          </div>
        </div>
      </div>
    </div>
    <!-- 近期新皮肤 -->
    <ul class="skin-last">
      <li>
        <a href="">
          <img src="../../assets/announce/skin/1.jpg" />
          <p class="hero-name">兔狲·蓬尾-张飞</p>
          <p class="show-mask">
            <span class="hero-n">兔狲·蓬尾-张飞</span>
            <span class="hero-skill">辅助</span>
            <span class="hero-time">上线时间：2025-04-10</span>
          </p>
        </a>
      </li>

      <li>
        <a href="">
          <img src="../../assets/announce/skin/2.webp" />
          <p class="hero-name">雪豹·霜爪-百里守约</p>
          <p class="show-mask">
            <span class="hero-n">雪豹·霜爪-百里守约</span>
            <span class="hero-skill">射手</span>
            <span class="hero-time">上线时间：2025-04-11</span>
          </p>
        </a>
      </li>


      <li>
        <a href="">
          <img src="../../assets/announce/skin/3.webp" />
          <p class="hero-name">灵野札记-张良</p>
          <p class="show-mask">
            <span class="hero-n">灵野札记-张良</span>
            <span class="hero-skill">法师</span>
            <span class="hero-time">上线时间：2025-04-10</span>
          </p>
        </a>
      </li>


      <li>
        <a href="">
          <img src="../../assets/announce/skin/4.webp" />
          <p class="hero-name">云诺千山-公孙离</p>
          <p class="show-mask">
            <span class="hero-n">云诺千山-公孙离</span>
            <span class="hero-skill">射手</span>
            <span class="hero-time">上线时间：2025-04-03</span>
          </p>
        </a>
      </li>



    </ul>
  </div>
  <!-- 英雄 -->
  <div class="new-hero">
    <!-- 英雄标题 -->
    <div class="skin-title">
      <h1>英雄</h1>
    </div>
    <!-- 最新英雄 -->
    <div class="skin-main">
      <div class="main-mask">
        <div class="main-aside">
          <h1>
            <span>笑面诡手</span>
            <span>空空儿</span>

          </h1>
          <p class="explain">
            <!-- 王者荣耀“高原三宝”三江源联动皮肤 -->
          </p>
          <p class="time">
            上线时间：2025.03.27
          </p>
          <div class="gif">
            <img src="../../assets/announce/hero/mainaside.webp" />
          </div>
          <div class="check">
            <span>查看英雄 ></span>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mode">
    <!-- 英雄标题 -->
    <div class="skin-title">
      <h1>其他</h1>

    </div>
    <!-- 其他模块的内容 -->
    <div class="mode-contain">
      <div class="left">
        <img src="../../assets/announce/mode/bg1.webp" />
        <div class="bottom-mask">
          <div class="mask-tit">新玩法-守卫峡谷</div>
          <div class="mask-time">2021.01.06</div>
          <div class="mask-txt">守卫峡谷，全新PVE玩法来了！</div>
          <div class="mask-more">
            <span>查看详情 ></span>
          </div>
        </div>
        <div class="icon"></div>
      </div>
      <ul class="right">
        <li>
          <img src="../../assets/announce/mode/bg2.webp" alt="">
          <div class="bottom-mask">
            <div class="bottom-left">
              <div class="mask-txt">
                战队赛全国大赛版本
              </div>
              <div class="mask-time">
                2020.01.09
              </div>
            </div>
            <div class="bottom-right">
              <div class="mask-more">
                <span>查看详情 ></span>
              </div>
            </div>
          </div>
        </li>
        <li>
          <img src="../../assets/announce/mode/bg3.webp" alt="">
          <div class="bottom-mask">
            <div class="bottom-left">
              <div class="mask-txt">
                青白蛇美术优化
              </div>
              <div class="mask-time">
                即将上线
              </div>
            </div>
            <div class="bottom-right">
              <div class="mask-more">
                <span>查看详情 ></span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- 底部 -->
  <div class="footer">
    <p>
      <a href="">腾讯互动娱乐</a> |
      <a href="">服务条款</a> |
      <a href="">腾讯游戏隐私保护指引</a> |
      <a href="">广告服务</a> |
      <a href="">腾讯游戏招聘</a> |
      <a href="">腾讯游戏客服</a> |
      <a href="">游戏地图</a> |
      <a href="">成长守护平台</a> |
      <a href="">商务合作</a> |
      <a href="">网站导航</a> |
    </p>
    <p>
      COPYRIGHT &copy; 1998 – 2023 TENCENT. ALL RIGHTS RESERVED.
    </p>
    <p>腾讯公司 版权所有</p>

  </div>

  <!-- 右侧下载二维码 -->
  <div class="down-img">
    <img src="../../assets/common/wzry_qrcode2.webp">
  </div>


  <script src="../../node_modules/swiper/swiper-bundle.min.js"></script>
  <script>
    const swiper = new Swiper('.swiper', {
      effect: 'coverflow',
      // initialSlide: 6,
      // grabCursor: true,
      // 核心配置
      loop: true,             // 无缝循环 [6,7](@ref)
      speed: 300,             // 切换动画时长（单位ms）
      slideToClickedSlide: true,
      centeredSlides: true,
      slidesPerView: 3, 
      // spaceBetween: 600,
      coverflowEffect: {
        rotate: 0,
        stretch: -250,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      // autoplay:true,//等同于以下设置
      autoplay: {
        delay: 2000,        // 自动播放间隔（单位ms）
        disableOnInteraction: false // 用户操作后仍自动播放
      },

      // 分页器配置
      pagination: {
        el: '.swiper-pagination',
        clickable: true     // 分页器可点击切换
      },

      
    });
  </script>
</body>

</html>